
<template>
  <div class="app-container">
    <div class="flex" style="justify-content: flex-start; flex-wrap: wrap">
      <!-- <JFind :className="'find1'" :searchTitle="'分类资料查询条件'" :formList="formList" @findClicked="findClicked" @selectChange="selectChange" /> -->
      <JFind
        :className="'find2'"
        :searchTitle="'材料查询条件'"
        :OriginalFilter="{ static: true }"
        :formList="formList2" 
        @findClicked="findClicked2"
        @clickNumber1="clickNumber1"
      />
    </div>
    <div  style="width: 100%; background-color: white">
      <el-card style="width: 20%;" shadow="never" :body-style="{ padding: '5px 10px 5px' }">
     


       


        <!-- <Table :tableHeader="tableHeader" :tableData="tableData" :isLoading="isLoading" @currentRow="currentRow" :outTableHeight="80" /> -->


      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料查询</span>
        </div>
        <Table
          :tableHeader="tableHeader3"
          :tableData="tableData3"
          :isLoading="isLoading3"
          :outTableHeight="80"
          selection
          @selectList="selectList1"
          @currentRow="currentRow3"
          :getTableList="getTableList3"
          @confirmChange="confirmChange3"
          @currentRow1="dbClickTableRow"
           @download="download"
        />
      </el-card>
      <!-- <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 400px">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料属性(红色为必填)</span>
        </div>
        <JTable
          style="width: 100%"
          :tableHeader="tableHeader1"
          :tableData="tableData2"
          :getTableList="currentRow"
          @confirmChange="confirmChange"
          :outTableHeight="280"
        />
        <div class="flex" style="flex-direction: column; align-items: center">
          <div>英文名称</div>
          <el-input v-model="english" placeholder="" clearable></el-input>
          <div>中文名称</div>
          <el-input v-model="assembly" placeholder="" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" clearable disabled></el-input>
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料查询</span>
        </div>
        <Table
          :tableHeader="tableHeader3"
          :tableData="tableData3"
          :isLoading="isLoading3"
          :outTableHeight="80"
          @currentRow="currentRow3"
          :getTableList="getTableList3"
          @confirmChange="confirmChange3"
          @currentRow1="dbClickTableRow"
        />
      </el-card> -->
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>

    <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="新增材料">

      <JFind
        :className="'find2'"
        :searchTitle="'材料查询条件'"
        :OriginalFilter="{ static: true }"
        :formList="formList5"
        @findClicked="findClicked3"
        @Launchform="Launchform1"
      />


      <div style="display: flex;width: 100%;">
        <div style="width: 30%;">
          <div slot="header" class="f16">
            <span style="font-weight: 600">分类资料</span>
          </div>
          <Table :tableHeader="tableHeader" :tableData="tableData" :isLoading="isLoading" @currentRow="currentRow" :outTableHeight="80" />
        </div>



                  <div style="width: 60%;">
                    <div slot="header" >
          <span style="font-weight: 600">材料属性(红色为必填)</span>
        </div>
                    <JTable
                  style="width: 100%"
                  :tableHeader="tableHeader1"
                  :tableData="tableData2"
                  :getTableList="currentRow"
                  @confirmChange="confirmChange"
                  :outTableHeight="280"
                />
                <div class="flex" style="flex-direction: column; align-items: center">
                  <div>英文名称</div>
                  <el-input v-model="english" placeholder="" clearable></el-input>
                  <div>中文名称</div>
                  <el-input v-model="assembly" placeholder="" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" clearable disabled></el-input>
                </div>
              </div>
          </div>

    
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
import { reactify } from '@vueuse/core'
export default defineComponent({
  name: 'SurfaceMaterialDataFile'
})
</script>
<script lang="ts" setup>
import { i18n } from '@/i18n'
import { selectList, selectSomeList } from '@/plugins/mixin'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, ref, watch } from 'vue'
import {cloneDeep} from 'lodash'
//检核
const selectList1 = (row:any) => {
  cancelCheckParms.value = row.map((item:any) => {
    return item.id
  })
}
const cancelCheckParms = ref([])
const counterCheck = async() => {
  if(cancelCheckParms.value.length === 0){
    JMessage.warning('请选择要检核的材料')
    return 
  }
  const result = await service.post<any,any>(`/mes/mtl/check`,cancelCheckParms.value)
  if(result.code === 200){
    JMessage.success(result.msg)
    getTableList3() 
  }else{
    JMessage.error(result.msg)
  }
}


// 取消检核
const CancelCheckMethods = async() => {
  if(cancelCheckParms.value.length === 0){
    JMessage.warning('请选择要取消检核的材料')
    return 
  }
  const result = await service.post<any,any>(`/mes/mtl/cancelCheck`,cancelCheckParms.value)
  if(result.code === 200){
    JMessage.success(result.msg)
    getTableList3() 
  }else{
    JMessage.error(result.msg)
  }
}


// 退回
const returnMethods = async() => {
  if(cancelCheckParms.value.length === 0){
    JMessage.warning('请选择要检退回的材料')
    return 
  }
  ElMessageBox.confirm('确认要退回数据吗?')
    .then(async () => {
      const res = await service.post<any, any>(`/mes/mtl/back`,cancelCheckParms.value)
    if (res.code === 200) {
      JMessage.success(res.msg)
      getTableList3()
    } else {
      JMessage.warning(res.msg)
    }
    })
    .catch(() => {})
}




const findClicked2 = async (content: string) => {
  if(content === '新增材料'){
    dialogVisible.value = true 
    active.value = true
    active1.value = true
  }
  if(content === '检核'){
    counterCheck()
  }
  if(content === '取消检核'){
    CancelCheckMethods()
  }
  if(content === '退回'){
    returnMethods()
  }
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}















const assemblyParms= ref<any>([])
const dialogVisible = ref(false)
const assembly = ref('')
const english = ref('') // 英文名称
const rowList = ref()
const active = ref(true)
const active1 = ref(true)
const findClicked3 = async(row:any) =>{
  active1.value = true
  if(active.value){
    
      assemblyParms.value = tableData2.value.filter((item: any) => {
      if (item.mtlProperty === '供应商' || item.mtlProperty === '单位') {
        return false
      } else {
        return true
      }
    })
    
    assemblyParms.value = cloneDeep(  
  assemblyParms.value.map((item: any) => {  
    delete item.options
    const newItem = cloneDeep(item); // 克隆当前 item 的副本  

    // 处理字符串拆分  \
    if(newItem.mtlProperty2){
      let list1 = newItem.mtlProperty2.split('  '); // 按照两个空格分割  
      // 更新新副本中的属性   
      newItem.mtlProperty = list1[0]; // 更新 mtlProperty  
      newItem.seqNo = list1.length > 1 ? list1[1] : undefined; // 第二个部分  
    }else{
      newItem.mtlProperty = ''; // 保持原有的值
    }


    return newItem; // 返回更新后的新副本  
  })  
);   


  }

if(active1.value){
  if (row === '新增材料') {
  const mtlSpec = tableData2.value.find((item: any) => item.mtlProperty === '宽幅').mtlProperty2
    ? tableData2.value.find((item: any) => item.mtlProperty === '宽幅').mtlProperty2
    : null
  const vendor = tableData2.value.find((item: any) => item.mtlProperty === '供应商').mtlProperty2
    ? tableData2.value.find((item: any) => item.mtlProperty === '供应商').mtlProperty2.split('  ')[0]
    : null
  let res = await service.post<any, any>(`/mes/mtl/add`, {
    engName: english.value, // 英文名称
    assemblyParms: assemblyParms.value,
    list:assemblyParms.value, // 中文名称
    mtlUnit: tableData2.value.find((item: any) => item.mtlProperty === '单位').mtlProperty2.split('  ')[0], // 单位
    vendor, // 供应商
    typeNo3: currentTypeNo3.value, // 小类代码
    typeId:rowList.value.typeId,
    typeNo:rowList.value.typeNo
  })

if (res.code === 200) {
  
   currentRow(currentTableRow.value)
  english.value = ''
  dialogVisible.value = false
  JMessage.success(res.msg)
  assembly.value = ''
  getTableList3()
} else {
  JMessage.error(res.msg)
}

}
  if (row === '组成材料名称预览') {

  if(assemblyParms.value.length === 0){
    JMessage.warning('数据不完善')
    return
  }
  const result = await service.post<any, any>(`/mes/mtl/mtlName`, assemblyParms.value)
  if(result.code === 200){
    active.value = false
    getTableList3()
    assembly.value = result.data.mtlName 
    ElMessage.success(result.msg)
  }else{
    ElMessage.error(result.msg)
  }
  }
}
}
const formList5 = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '请输入大类名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入中类名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入小类名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '新增材料',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '组成材料名称预览',
    bgColor: '#1890FF'
  },
])
const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '中类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '小类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '组合材料'
  },
  {
    type: 'button',
    checkboxLabel: '插入材料',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '转物料属性定义'
  }
])
const formList2 = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入宽幅',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '供应商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入建档用户',
    inputValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '未审核',
    checked: false,
    label: '3'
  },
  {
    type: 'radio1',
    checkboxLabel: '已审核',
    checked: false,
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '退回',
    checked: false,
    label: '2'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    checked: true,
    label: '0'
  },
  {
    type: 'button',
    checkboxLabel: '检核',
  },
  {
    type: 'button',
    checkboxLabel: '取消检核',
  },
  {
    type: 'button',
    checkboxLabel: '退回',
    bgColor: '#FF0000'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '新增材料',
    bgColor: '#1890FF'
  },
])
const tableHeader = ref([
  {
    label: '大类',
    prop: 'typeName'
  },
  {
    label: '中类',
    prop: 'typeName2'
  },
  {
    label: '小类',
    prop: 'typeName3'
  }
])
// 表一模块
// 置空按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '组合材料') {

    const list = tableData2.value.filter((item: any) => {
      if (item.mtlProperty === '供应商' || item.mtlProperty === '单位' || item.mtlProperty === '宽幅') {
        return false
      } else {
        return true
      }
    })
    let res = await LoginWork.post<any, any>(`/date/getMaterialPropertiesIn`, list)
    if (res.code === 200) {
      JMessage.success(res.message)
      assembly.value = res.data.mtlProperty
    } else {
      JMessage.warning(res.message)
    }
  }

}
const deleteParms = ref('')



const download = (row: any, item: any) => {
  
  if (item.label === '删除') {
    deleteParms.value = row.id
    handleCloseMateriaLKlc3()
  }
}

const handleCloseMateriaLKlc3 = (_done?: () => void) => {
  if(deleteParms.value === ''){
    ElMessage.warning('请选择要删除的行')
    return
  }
  ElMessageBox.confirm('确认要删除该数据吗?')
    .then(async () => {
      const res = await service.delete<any, any>(`/mes/mtl/${deleteParms.value}`)
    if (res.code === 200) {
      JMessage.success(res.msg)
      getTableList3()
    } else {
      JMessage.warning(res.msg)
    }
    })
    .catch(() => {})
}
const tableData = ref([])
const isLoading = ref(true)
// 获取表数据
const Launchform1 = (row:any) => {
  typeNameList.value.typeName = row[0].inputValue
  typeNameList.value.typeName2 = row[1].inputValue
  typeNameList.value.typeName3 = row[2].inputValue
  getTableList()
}
const typeNameList = ref({
  typeName: '',
  typeName2: '',
  typeName3: ''
})
const getTableList = debounce(async () => {
 
  isLoading.value = true
  let tableDataList = await service.get<any, any>(`/mes/mtl/list/exclude?typeName=${typeNameList.value.typeName}&typeName2=${typeNameList.value.typeName2}&typeName3=${typeNameList.value.typeName3}`)

  isLoading.value = false
  tableData.value = tableDataList.data
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const tableData2 = ref<any>([])
const currentTypeNo3 = ref([])
// 点击表给另一张表传数据
const currentTableRow = ref({})
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {

  rowList.value = row

  currentTableRow.value = row
  let { typeNo, typeNo2, typeNo3 }: any = row
  currentTypeNo3.value = typeNo3
  // 给表二传指令号

  let table2Data = await service.get<any, any>(`/mes/mtl/list/${row.typeId}`)
  table2Data.data.push(
    {
      mtlProperty: '单位',
      propertyNeed: 'Y'
    },
    {
      mtlProperty: '供应商'
    }
  )
  tableData2.value = table2Data.data.map((item: any,index:number) => {
    item.disableConfirm = true
    item.options = []
    item.propertyNeed === 'Y' ? (item.backgroundColor = '#FF0000') : (item.backgroundColor = 'white')
    // 添加表格中下拉框数据
    getSelectList6(item)
    if (item.mtlProperty !== '材质') {
      item.addAndUpdate = true
    } 
    if (item.mtlProperty === '材质' && item.mtlNoNeed    !== 'Y') {
      // item.inputValue = '1'
      item.mtlProperty2 = row.typeName3
      item.type = 'input'
    }else{
      item.addAndUpdate = true
    }
    console.log(item)
    return item
  })

}
const tableHeader1 = ref([
  {
    label: '物料属性',
    prop: 'mtlProperty',
    backgroundColor: true,
    width: 75
  },
  {
    allowCreate: true,
    label: '属性规格',
    prop: 'mtlProperty2',
    type: 'selectR'
  }
])
// 材料属性定义
const tableHeaderList = ref<any>({}); // 这里初始化为空对象  
const tableHeaderListMehtodsDate = ref();  

const tableHeaderListMehtods = async () => {  
  const result = await service.get<any, any>(`/mes/material/getMaterialPropertiesList`);  


  // 使用动态映射  

  // 将 mtlProperty 和 id 动态映射到 tableHeaderList  
  result.data.forEach((item: any) => {  
    if (item.mtlProperty) {  
      // 这里动态添加属性  
      tableHeaderList.value[item.mtlProperty] = item.id;  
    }  
  });  
};  

// 获取表二下拉框数据（下拉框接口是数组对象）
const getSelectList6 = async (row: any) => {
  const keyValuePairs = [];  

// 遍历对象  
for (const key in tableHeaderList.value) {  
    if (tableHeaderList.value.hasOwnProperty(key)) {  
        keyValuePairs.push({ key: key, value: tableHeaderList.value[key] });  
    }  
}  

// 输出结果  

keyValuePairs.map(async (item: any) => {
  console.log(item.value)
  if (row.mtlProperty === item.key && item.id !== null  ) {
    let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
      createTime: "",  
      id: Number(item.value),  
      midId: Number(item.value),  
      mtlUnit: "",  
      params: {},  
      remark: "",  
      sortNo: "",  
      updateTime: "",
      mtlSpec:""
    })
    res.rows.map((Vendor: any) => {
      row.options.push({
        label: `${Vendor.mtlSpec}`,
        value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
      })
    })
  }
})


  // if (row.mtlProperty === tableHeaderList.value) {
   
  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.K),  
  //     midId: Number(tableHeaderList.value.K),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
  //   })
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label: `${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
  //     })
  //   })
  // }
  // if (row.mtlProperty === '宽度') {

  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.K1),  
  //     midId: Number(tableHeaderList.value.K1),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
      
  //   })
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label: `${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
  //     })
  //   })
  // }
  // if (row.mtlProperty === '纹路') {
  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.W),  
  //     midId: Number(tableHeaderList.value.W),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
      

  //   })
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label: `${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
  //     })
  //   })
  // }
  // if (row.mtlProperty === '规格') {

  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.G),  
  //     midId: Number(tableHeaderList.value.G),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
      

  //   })
     
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label: `${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
  //     })
  //   })
  // }

  // if (row.mtlProperty === '厚度') {
    
  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.H),  
  //     midId: Number(tableHeaderList.value.H),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
      

  //   })
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label:`${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec}  ${Vendor.mtlSeq}`
  //     })
  //   })
  // }

  // if (row.mtlProperty === '宽幅') {

  //   let res = await service.post<any, any>('/mes/material/getMaterialPropertiesSpecsList?pageSize=999',{
  //     createTime: "",  
  //     id: Number(tableHeaderList.value.K2),  
  //     midId: Number(tableHeaderList.value.K2),  
  //     mtlUnit: "",  
  //     params: {},  
  //     remark: "",  
  //     sortNo: "",  
  //     updateTime: "",
  //     mtlSpec:""
      

  //   })
  //   res.rows.map((Vendor: any) => {
  //     row.options.push({
  //       label: `${Vendor.mtlSpec}`,
  //       value: `${Vendor.mtlSpec} ${Vendor.mtlSeq}`
  //     })
  //   })
  // }
   if (row.mtlProperty === '单位') {
    let res = await service.post<any, any>('/mes/material/mtlUnitList',{
      createTime: "",  
      engMtlUnit: "",  
      id: 0,  
      mtlSeq: "",  
      mtlUnit: "",  
      params: {},  
      remark: "",  
      sortNo: 0,  
      updateTime: "" 
    })

    res.rows.map((Vendor: any) => {
      row.options.push({
        label: Vendor.mtlUnit,
        LeftLabel: `${Vendor.mtlUnit}`,
        RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
        value: `${Vendor.mtlUnit}  ${Vendor.mtlSeq}  ${Vendor.engMtlUnit}  ${Vendor.sortNo}`
      })
    })
  }
  
  
  if (row.mtlProperty === '供应商') {
    let res = await service.post<any, any>('/mes/kfBom/vendorList?pageSize=9999',{vendorNo:''})
    res.rows.map((Vendor: any) => {
      row.options.push({
        label: Vendor,
        value: Vendor
      })
    })
  } else {

  }
}



const confirmChange = (row: any, fn: any, current: any) => {
  document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
}

// 表三模块
const tableData3 = ref([])
const tableHeader3 = ref([
  {
    backgroundColor: true,
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 300,
    change: true
  },
  {
    label: '英文名称',
    prop: 'engName',
    width: 250
  },
  {
    label: '宽幅',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '供应商',
    prop: 'vendor',
  },
  {
    label: '建档用户',
    prop: 'createBy',
    change: true
  },
  {
    label: '操作',
    prop: 'outSum',
    type: 'functionRow',
    width: 200
  }
])
const isLoading3 = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList3()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList3()
}
const status = ref('0')
const clickNumber1 = (val: string) => {
  status.value = val
  getTableList3()
}
// 获取表数据
const getTableList3 = debounce(async () => {
  isLoading3.value = true
  let tableDataList = await service.post<any, any>('/mes/mtl/list', {
    mtlName: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入材料名称')?.inputValue, // 材料名称
    mtlName2: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入材料名称2')?.inputValue, // 材料名称
    mtlName3: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入材料名称3')?.inputValue, // 材料名称
    mtlNo: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入物料编码')?.inputValue, // 物料编码
    mtlSpec: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入宽幅')?.inputValue, // 宽幅
    mtlUnit: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入单位')?.inputValue, // 单位
    sysUser: formList2.value.find((item: any) => item.inputPlaceholder && i18n.global.t(item.inputPlaceholder) === '请输入建档用户')?.inputValue, // 建档用户
    vendor: formList2.value.find((item: any) => item.selectP && i18n.global.t(item.selectP) === '供应商')?.selectValue, // 供应商
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    status: status.value
  })
  isLoading3.value = false
  tableData3.value = tableDataList.rows.map((item: any) => {
    if(item.status !== '1'){
      item.functionRow = [
        {
          label: '删除'
        },
        // {
        //   label: '修改'
        // }
      ]
    }

    item.uneffectDate = item.uneffectDate || ''
    if (item.status === '1') {
      tableHeader3.value.forEach((item: any) => (item.change = true))
      item.backgroundColor = '#67C23A'
    } else if (item.status === '2') {
      tableHeader3.value.forEach((item: any) => (item.change = false))
      item.backgroundColor = '#FF0000'
    } else {
      tableHeader3.value.forEach((item: any) => (item.change = false))
    }
    return item
  })
  total.value = tableDataList.total
}, 500)
// 获取宽幅下拉框数据（下拉框接口是数组字符串）
const getSelectList4 = async (row: any) => {
  let res = await service.get<any, any>('/MaterialManagement/getWideDefinitionList')
  res.map((Vendor: any) => {
    row.vendor.options.push({
      label: Vendor.mtlSpec,
      LeftLabel: `${Vendor.mtlSpec}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      value: `${Vendor.mtlSeq}  ${Vendor.mtlSpec}  ${Vendor.sortNo}`
    })
  })
}
// 获取表三中供应商下拉框数据（下拉框接口是数组字符串）
const getSelectList5 = async (row: any) => {
  let res = await service.get<any, any>('/back/vendorQuery')
  res.map((Vendor: any) => {
    row.vendor.options.push({
      label: Vendor.vendorName,
      LeftLabel: `${Vendor.vendorName}`,
      RightLabel: `${Vendor.vendorNo}`,
      value: `${Vendor.vendorName}  ${Vendor.vendorNo}`
    })
  })
}
onMounted(() => {
  getTableList3()
  tableHeaderListMehtods()
})
watch(formList2.value, () => {
  getTableList3()
})
// 修改确认函数
const confirmChange3 = async (row: any, fn: any, current: any) => {
  if (row.status === '1') {
    JMessage.error('该物料已审核，无法修改')
    return
  }
  const copyRow = JSON.parse(JSON.stringify(row))

  const { engName, mtlNo, uneffectDate, vendor } = copyRow
  let res = await LoginWork.put<any, any>('/date/getMaterialPropertiesUpdate', {
    engName,
    mtlNo,
    uneffectDate: uneffectDate,
    vendor: vendor.selectValue.split('  ')[0]
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
    fn()
  } else {
    JMessage.error(res.message)
  }
}
// 点击表三
const currentRow3MtlNo = ref()
const currentRow3 = async (row: any) => {
  const { mtlNo } = row
  deleteParms.value = row.id
  currentRow3MtlNo.value = mtlNo
  // getSelectList5(row)
}

// 获取 大类 中类 小类 下拉框数据
const getSelectList = async (mid: any = '', small: any = '') => {
  let res = await service.get<any, any>('/back/mtlTypeLMSQuery', {
    params: {
      mtlType: small ? small : mid
    }
  })
  if (small) {

    formList.value.find((item: any) => item.selectP && i18n.global.t(item.selectP) === '小类')?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => i18n.global.t(item.selectP) === '小类')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  } else if (mid) {
    formList.value.find((item: any) => item.selectP && i18n.global.t(item.selectP) === '中类')?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => i18n.global.t(item.selectP) === '中类')
        ?.selectOptions?.push({
          optionKey: `${item.typeName}  ${item.typeNo}`,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })

  } else {
    formList.value.find((item: any) => item.selectP && i18n.global.t(item.selectP) === '大类')?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => i18n.global.t(item.selectP) === '大类')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  }
}
// 获取供应商下拉框数据
const getVendorList = async () => {
  let vendorName = await service.get<any, any>('/back/vendorList')
  let vendorNames = formList2.value.find((item: any) => item.type === 'select' && i18n.global.t(item.selectP) === '供应商') as any
  // 插入供应商
  if (vendorName && vendorNames) {
    vendorName.forEach((item: any, index: any) => {
      if (item === null) return
      vendorNames.selectOptions?.push({
        optionKey: index,
        optionValue: `${item.vendorName}`,
        optionLabel: `${item.vendorName}`,
        LeftLabel: `${item.vendorName}`,
        RightLabel: `${item.vendorNo}`
      })
    })
  }
}
onMounted(() => {
  // getSelectList()
  // getVendorList()
})
const selectChange = (val: any, selectP: any) => {
  if (selectP === '大类') {
    getSelectList(formList.value[0].selectValue.split('  ')[1])
  }
  if (selectP === '中类') {
    getSelectList('', formList.value[1].selectValue.split('  ')[1])
  }
}

const formList3 = ref([
  {
    type: 'input',
    inputLabel: '材料名称',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '220px !important'
  },
  {
    type: 'input',
    inputLabel: '宽幅',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '80px !important'
  },
  {
    type: 'input',
    inputLabel: '单位',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '80px !important'
  }
])
const formList4 = ref<any>([
  {
    inputWidth: '400px',
    type: 'input',
    inputLabel: '材料名称',
    inputPlaceholder: '',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '宽幅',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '单位',
    selectLabel: '',
    selectOptions: []
  }
])
const dbClickTableRow = async (row: any) => {
  const { mtlName, mtlSpec, mtlUnit } = row

  formList3.value[0].inputValue = mtlName
  formList4.value[0].inputValue = mtlName
  formList3.value[1].inputValue = mtlSpec
  formList4.value[1].selectValue = mtlSpec
  formList3.value[2].inputValue = mtlUnit
  formList4.value[2].selectValue = mtlUnit
  let res = await service.get<any, any>('/MaterialManagement/getWideDefinitionList')
  res.map((Vendor: any, index: number) => {
    formList4.value[1].selectOptions.push({
      optionKey: index,
      optionLabel: Vendor.mtlSpec,
      LeftLabel: `${Vendor.mtlSpec}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      optionValue: `${Vendor.mtlSpec}`
    })
  })
  let res2 = await service.get<any, any>('/MaterialManagement/getUnitList')
  res2.map((Vendor: any, index: number) => {
    formList4.value[2].selectOptions.push({
      optionKey: index,
      optionLabel: Vendor.mtlUnit,
      LeftLabel: `${Vendor.mtlUnit}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      optionValue: `${Vendor.mtlUnit}`
    })
  })
}
const comfirmChange = async () => {
  let res = await LoginWork.put<any, any>('/date/getMaterialProperties2Update', {
    updateTop: {
      mtlNo: currentRow3MtlNo.value,
      mtlName: formList3.value[0].inputValue,
      mtlSpec: formList3.value[1].inputValue,
      mtlUnit: formList3.value[2].inputValue
    },
    updateEnd: {
      mtlNo: currentRow3MtlNo.value,
      mtlName: formList4.value[0].inputValue,
      mtlSpec: formList4.value[1].selectValue,
      mtlUnit: formList4.value[2].selectValue
    }
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}
</script>

<style lang="less" scoped>
:deep(.find1) {
  width: 100%;
}
:deep(.find2) {
  width: 100%;
}
:deep(.find2 .el-form-item:nth-child(4)) {
  .el-input {
    width: 147px;
  }
}
:deep(.find2 .el-form-item:nth-child(5)) {
  .el-input {
    width: 147px;
  }
}
:deep(.find2 .el-form-item:nth-child(6)) {
  .el-input {
    width: 147px;
  }
}
:deep(.el-form-item:nth-child(1)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(2)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(3)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-last-child(2)) {
  .el-select {
    width: 140px;
    height: 28px;
  }
}

h1 {
  font-size: 16px;
}
</style>
<style>
.app-main {
  background-color: white !important;
}
</style>
